<template>
    <div>
        <basic-container>
            <avue-crud :option="tableOption"
                       :data="tableData"
                       :table-loading="tableLoading"
                       :page="page"
                       ref="crud"
                       @on-load="handleList"
                       @refresh-change="refreshChange"
                       @search-change="searchChange"
                       @row-save="handleSave"
                       @row-update="handleUpdate"
                       @row-del="handleDel">
                <template slot-scope="scope"
                          slot="menu">
                    <el-button icon="el-icon-check"
                               size="small"
                               @click="handleGrade(scope.row,scope.$index)">权限
                    </el-button>
                </template>
            </avue-crud>
            <el-dialog title="菜单"
                       :visible.sync="grade.box"
                       width="40%">
                <el-tree :data="menuAll"
                         ref="tree"
                         :check-strictly="true"
                         :default-checked-keys="grade.check"
                         :default-expanded-keys="grade.check"
                         show-checkbox
                         node-key="value"
                         @check-change="handleGradeCheckChange">
                </el-tree>
                <span slot="footer"
                      class="dialog-footer">
          <el-button type="primary"
                     @click="handleGradeUpdate">更新</el-button>
        </span>
            </el-dialog>
        </basic-container>
    </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import {getRoleData} from '@/api/admin'
    import {treeListLoad} from '@/api/admin/menu'
    import {update, del, add, roleMenuSetting} from '@/api/admin/role'
    import {roleOption} from "@/const/admin/adminTabelOption.js";

    export default {
        name: "role",
        components: {},
        data() {
            return {
                searchForm: {},
                menuAll: [],
                tableOption: roleOption, //表格设置属性
                tableData: [], //表格的数据
                tablePage: 1,
                tableLoading: false,
                tableObj: {},
                page: {
                    total: 0, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 10 //每页显示多少条
                },
                grade: {
                    box: false,
                    check: []
                }
            }
        },
        created() {
            //初始化数据格式
            this.tableOption = roleOption;
            this.handleList();
        },
        watch: {},
        mounted() {
        },
        computed: {
            ...mapGetters(["permission"])
        },
        props: [],
        methods: {
            /**
             * @title 权限更新
             *
             **/
            handleGradeUpdate() {
                const halfChecked=this.$refs.tree.getHalfCheckedKeys();
                const checked=this.$refs.tree.getCheckedKeys();
                this.tableObj.check = checked.concat(halfChecked);

                let dto={
                    roleId:this.tableObj.id,
                    list:this.tableObj.check
                };

                roleMenuSetting(dto).then(res => {
                    this.$message.success("操作完成")
                }).catch(err => {
                    this.$message.error("网络异常:" + err)
                });

                this.tableObj = {};
                this.grade.check = new Array();
                this.grade.box = false;
            },
            /**
             * @title 权限选择
             *
             **/
            handleGradeCheckChange(data, checked) {
                if (checked) {
                    this.grade.check.push(data.value);
                } else {
                    this.grade.check.splice(this.grade.check.indexOf(data.value), 1);
                }
            },
            /**
             * @title 打开权限
             */
            handleGrade(row) {
                let dto={}
                treeListLoad(dto).then(res => {
                    const data = res.data.data;
                    this.grade.box = true;
                    this.tableObj = row;
                    this.menuAll = data;

                    this.grade.check = this.tableObj.check;


                });

            },
            /**
             * @title 打开新增窗口
             * @detail 调用crud的handleadd方法即可
             *
             **/
            handleAdd() {
                this.$refs.crud.rowAdd();
            },
            /**
             * @title 获取数据
             * @detail 赋值为tableData表格即可
             *
             **/
            handleList(page, searchDto) {
                let dto = {
                    page: 1,
                    limit: 10
                };
                if (page) {
                    dto.page = page.currentPage;
                    dto.limit = page.pageSize;
                }
                if (searchDto) {
                    dto.data = searchDto;
                }
                this.tableLoading = true;
                getRoleData(dto).then(res => {
                    const data = res.data.data;

                    this.tableData = data.list;
                    this.page.total = data.total;
                    this.page.currentPage = data.pages;
                    this.tableLoading = false;
                });

            },
            /**
             * @title 数据添加
             * @param row 为当前的数据
             * @param done 为表单关闭函数
             *
             **/
            refreshChange(data) {
                this.handleList(data.page, data.searchForm)
            },
            searchChange(form, done) {
                this.searchForm = form;
                this.handleList(this.page, form);
                done()
            },
            handleSave(row, done) {
                let dto = row;
                add(dto).then(res => {
                    this.$message.success("操作完成")
                }).catch(err => {
                    this.$message.error("网络异常:" + err)
                });

                this.$message({
                    showClose: true,
                    message: "添加成功",
                    type: "success"
                });
                this.handleList(this.page, this.searchForm);
                done();
            },
            /**
             * @title 数据删除
             * @param row 为当前的数据
             * @param index 为当前更新数据的行数
             *
             **/
            handleDel(row, index) {
                let dto = row;
                this.$confirm(`是否确认删除序号为${row.name}`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        del(dto.id).then(res => {
                            this.$message.success("操作完成")

                        }).catch(err => {
                            this.$message.error("网络异常:" + err)
                        });

                    })
                    .catch(() => {
                    });
                this.handleList(this.page, this.searchForm);
            },
            /**
             * @title 数据更新
             * @param row 为当前的数据
             * @param index 为当前更新数据的行数
             * @param done 为表单关闭函数
             *
             **/
            handleUpdate(row, index, done) {
                let dto = row;
                update(dto).then(res => {
                    this.$message.success("操作完成")

                }).catch(err => {
                    this.$message.error("网络异常:" + err)
                });
                this.handleList(this.page, this.searchForm);
                done();
            }
        },
        created() {
            this.handleList();
        }
    };
</script>

<style lang="scss" scoped>
    .table-container {
        padding: 8px 10px;
    }
</style>
